<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link rel="stylesheet/less" href="./less/reset.less"/>
    <link rel="stylesheet/less" href="./less/order.less"/>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.4/weui.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/less.js/4.1.1/less.min.js"></script>
    <script type="text/javascript" src="https://res.wx.qq.com/open/libs/weuijs/1.2.1/weui.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.9.6/qs.js"></script>
    <script src="http://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <title></title>
</head>
<body>
    <div id="app">
        <div class="main">
            <div class="login-top">
                <header class="title">
                    <div class="spell">确认订单</div>
                    <div @click="spellDeals">
                        <img src="./img/arrow_back.png">
                    </div>    
                </header>
            </div>    
            <div class="orderMessage">
                <div id="progress"></div>
                <div class="message" @click="addressManagement" v-if="addAddressStatus">
                    <ul>
                        <li>
                            <ul>
                                <li>{{person}}</li>
                                <li v-show="addressStatus">{{addressStatus?'默认':''}}</li>
                            </ul>
                        </li>
                        <li>
                            <ul>
                                <li>{{phone}}</li>
                                <li>{{area}}</li>
                            </ul>
                        </li>
                        <li>
                            <img src="./img/arrow_right.png"/>
                        </li>
                    </ul>
                </div>
                <div v-else class="addAddress" @click="addressManagement">
                    <ul>
                        <li>
                            <img src="./img/addAddress.png"/>
                        </li>
                        <li>添加收货地址</li>
                    </ul>
                </div>
            </div>
            <div class="goods">
                <ul>
                    <li>
                        <img :src="goodsImage"/>
                    </li>
                    <li>
                        <ul>
                            <li>{{goodsName}}</li>
                            <li>{{spec}}</li>
                            <li>
                                <ul>
                                    <li>￥{{buyingPrice}}.00</li>
                                    <li>x1</li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li>
                        <ul>
                            <li>运费</li>
                            <li>
                                <img src="./img/hint.png"/>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <ul>
                            <li>0.0</li>
                            <li>
                                <img src="./img/arrow_right.png"/>
                            </li>
                        </ul>
                    </li>
                </ul>
                <ul>
                    <li>买家留言：</li>
                    <li>
                        <input type="text" placeholder="买家留言">
                    </li>
                </ul>
                <ul>
                    <li>商品合计</li>
                    <li>￥{{buyingPrice}}.00</li>
                </ul>
            </div>
            <div class="submitOrders">
                <ul>
                    <li>{{buyingPrice}}.00</li>
                    <li @click="orderPayment">提交订单</li>
                </ul>
            </div>
            <div id="toast" v-show="totasStatus">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast">
                    <i class="weui-icon-success-no-circle weui-icon_toast"></i>
                    <p class="weui-toast__content">{{totasName}}</p>
                </div>
            </div>
            <div id="textToast" v-show="tooltip">
                <div class="weui-mask_transparent"></div>
                <div class="weui-toast weui-toast_text">
                    <p class="weui-toast__content">{{tooltipName}}</p>
                </div>
            </div>
            <div id="loadingToast" v-if="loadingStatus">
                <div class="weui-mask"></div>
                <div class="weui-toast">
                    <span class="weui-primary-loading weui-icon_toast">
                      <span class="weui-primary-loading__dot"></span>
                    </span>
                    <p class="weui-toast__content">加载中</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="module">
    import { shoppingAddressList, addOrder } from './js/request/api.js';
    import { shareLink } from './js/public.js';
    Vue.prototype.public = {shareLink};
     let app = new Vue({
        el: '#app',
        data: {
            goodsImage: '',
            goodsName: '',
            buyingPrice: '',
            spec: '',
            person: '',
            phone: '',
            area: '',
            addressStatus: null,
            provinceId: '',
            cityId: '',
            areaId: '',
            address: '',
            addAddressStatus: false,
            totasStatus: false,
            tooltip: false,
            totasName: '',
            tooltipName: '',
            loadingStatus: false
        },
        mounted(){
            let that = this;
                that.orderInformation();
                that.public.shareLink();
        },
        methods:{

            orderInformation(){
                let that = this;
                let query = Qs.parse(location.search.substring(1));
                    that.goodsImage = query.goodsImage;
                    that.goodsName = query.goodsName;
                    that.buyingPrice = query.buyingPrice;
                    that.spec = query.spec;
                    that.person = query.person;
                    that.phone =  query.phone;
                    that.area = query.area+query.address;
                    that.provinceId = query.provinceId;
                    that.cityId = query.cityId;
                    that.areaId = query.areaId;
                    that.address = query.address;

                    if(query.addressManagementStatus){
                        that.person = query.person;
                        that.phone = query.phone;
                        that.area = query.area;
                        if(query.addressStatus == "false"){
                            that.addressStatus = false;
                        }else if(query.addressStatus == "true"){
                            that.addressStatus = true;
                            that.addAddressStatus = true;
                        }
                    }else{
                        let userData = JSON.parse(localStorage.getItem("userData"));

                        shoppingAddressList({
                            userId: userData.userId
                        }).then(res=>{

                        if(res.code == 0){
                            that.loadingStatus = true;
                            if(res.data.shoppingAddressList.length!=0){
                                let  address = res.data.shoppingAddressList.filter(item=>item.status==0);
                                    that.person = address[0].person;
                                    that.phone =  address[0].phone;
                                    that.area = address[0].area+address[0].address;
                                    that.provinceId = address[0].provinceId;
                                    that.cityId = address[0].cityId;
                                    that.areaId = address[0].areaId;
                                    that.address = address[0].address;
                                    that.addAddressStatus = true;
                                    if(address[0].status == 0){
                                        that.addressStatus = true;
                                    }else{
                                        that.addressStatus = false; 
                                    }
                                    
                                    setInterval(()=>{
                                        that.loadingStatus = false;
                                    },2000)
                            }else{
                                that.loadingStatus = true;
                                setInterval(()=>{
                                    that.loadingStatus = false;
                                },2000)
                            }
                        }
                    }).catch(error=>{
                        console.log(error);
                    })
                }
            },

            addressManagement(){
                let query = Qs.parse(location.search.substring(1));
                    console.log(query);
                let url = "./addressManagement.html?goodsId="+query.goodsId+"&goodsImage="+query.goodsImage+"&goodsName="+query.goodsName+"&buyingPrice="+query.buyingPrice+"&spec="+query.spec+"&teamId="+query.teamId+"&type="+0;
                        window.location.href = url;
            },

            spellDeals(){
                let that = this;
                let query = Qs.parse(location.search.substring(1));
                let url = "./spellDeals.html?goodsId="+query.goodsId+"&goodsImage="+query.goodsImage+"&goodsName="+query.goodsName+"&buyingPrice="+query.buyingPrice+"&spec="+query.spec+"&teamId="+query.teamId;
                        window.location.href = url;
            },

            orderPayment(){
                let that = this;
                let userData = JSON.parse(localStorage.getItem("userData"));
                let query = Qs.parse(location.search.substring(1));

                    if(that.provinceId && that.cityId && that.areaId){
                        addOrder({
                            buyerId: userData.userId,
                            buyerName: that.person,
                            teamId: Number(query.teamId),
                            goodsId: Number(query.goodsId),
                            goodsName: query.goodsName,
                            goodsSpec: query.goodsSpec,
                            goodsPrice: query.goodsPrice,
                            paymentAmount: query.goodsPrice,
                            provinceId: that.provinceId,
                            cityId: that.cityId,
                            areaId: that.areaId,
                            areaInfo: that.area,
                            address: that.address,
                            sellerName: that.person,
                            mobPhone: that.phone,
                            isIn: 0,
                            reinvest: null
                        }).then(res=>{
                            if(res.code == 0){
                                that.totasStatus = true;
                                that.totasName = res.data.msg;
                                let url = "./orderPayment.html?goodsId="+query.goodsId+"&goodsImage="+query.goodsImage+"&goodsName="+query.goodsName+"&buyingPrice="+query.buyingPrice+"&spec="+query.spec+"&teamId="+query.teamId+"&orderSn="+res.data.orderSn;
                                setTimeout(()=>{
                                    that.totasStatus = false;
                                    window.location.href = url;
                                },2000)
                            }
                        }).catch(error=>{
                            console.log(error);
                        })
                    }else{
                        that.tooltip = true;
                        that.tooltipName = '补全信息再提交订单'; 
                        setTimeout(()=>{
                            that.tooltip = false;
                        },2000)
                    }
            },
        },
    })
</script>